4 replies [Last post]
amrac
amrac's picture
Offline
newbie
Last seen: 6 years 29 weeks ago
Joined: 2014-02-17
Posts: 3
Points: 6

Hello,
I would appreciate your help very much. I know that this topic has been discussed before but I haven´t found any answer to my problem. I have a header in a page (a black div) with the navegation links. It looks like this:

website header

As you can see the 'More' link, which is connected to other 3 links (drop-down menu), is displaced. The child element in this case, makes the parent go up. And I don´t understand why.
This is the structure of the html:

<div class="top">
 
			<span class="ulisses">ULISSES</span>
			<span class="naveg1">Início</span>
			<span class="naveg">Espectáculo</span>
			<span class="naveg">Sobre nós</span>
			<span class="naveg">Escolas</span>
                        <span class="naveg">Fotografias - Ulisses</span>
			<span class="naveg_fim">
                 	  <ul id="nav">   
    			    <li><ul>
           		       <li><a href="#">Fotografias versão maiores de 3 anos</a></li>
            			<li><a href="#">Agenda</a></li>
            			<li><a href="#">Contato</a></li>
        		     </ul></li>
			    </ul>
			</span>
</div>

And the css:

.top{
width:100%;
height:40%;
position:fixed;
top:0px;
right:0px;
z-index:30;
overflow:visible;}
.ulisses{
padding:0 0 5px 15%;
text-align:center;
display:inline;
	position:relative;
}
.naveg, .naveg1{
text-align:center;
display:inline;
position:relative;}
.naveg_fim{
text-align:center;
display:inline-block;
position:relative;
left:0;
bottom:0;}
.naveg{
padding:0 0 5px 10px;
width:30px;
height:80px;}
.naveg1{
padding:0 0 5px 70px;
width:30px;
height:80px;
text-align:center;}
#nav{display:inline;
overflow:visible;
list-style:none;
text-align:left;
margin-bottom:10px;
float:left;
width:100%;
position:relative;
z-index:5;}
#nav li{
float:left;
overflow:visible;
margin-right:10px;
position:relative;
z-index:5;}
#nav a{
display:block;}
#nav ul{    
overflow:visible;
list-style:none;
position:absolute;
left:-9999px;
z-index:5;}
#nav ul li{
padding-top:1px;
overflow:auto; 
float:none;
z-index:5;}
#nav ul a{
white-space:nowrap; }
#nav li:hover ul{ 
left:0; 
z-index:5;}
#nav li:hover a{z-index:5;}
#nav li:hover ul a{z-index:5;}

Sorry for putting here so much code, but I can't figure out what I've done wrong. I would appreciate some help in this. And I thank you in advance for your help. Smile

AttachmentSize
header.png45.06 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 51 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9766
Points: 3848

You worry you posted too much

You worry you posted too much code; I think you didn't post enough.

There is no way to trigger the sub-menus in the posted code, nor does the html markup suggest a drop-down menu structure.

Can you link to the page, so we can see what's happening, or failing that, post all the code that created your page as seen in the image?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

amrac
amrac's picture
Offline
newbie
Last seen: 6 years 29 weeks ago
Joined: 2014-02-17
Posts: 3
Points: 6

Website link

Hello,
thank you so much for replying. I've published this page in this link: http://ulisses.hostei.com/index2.html. You can see that 'More' is going up because of it's child elements. I don't understand why this is happening. Puzzled

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 51 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9766
Points: 3848

The issue is the {display:

The issue is the {display: inline-block;}. Internally it acts as a block element, so text is aligned at the top of the box instead of on the base-line of the other elements.

I've refactored the top banner to use semantic element tags, and lose the unneeded spans and divs.

Here is a minimal test case. It is not fully tested but should work on any of the reasonably modern browsers.

<!DOCTYPE html>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>amrac test</title>
  <style type="text/css">
 
  body {
    font: 87.5%/1.25 sans-serif;
    }
 
  h1 {
    display: inline-block;
    font-size: 3.5em;
    font-weight: normal;
    margin-left: 15%;
    margin-top: 0;
    }
 
  ul{
    display: inline;
    list-style: none;
    padding-left: 1em;
    white-space: nowrap;
    }
 
  li {
    border-right: 1px solid;
    display: inline-block;
    padding-right: .3em;
    position: relative;
    white-space: normal;
    }
 
  li:last-child {
    border-right: none;
    }
 
  li ul {
    left: -999em;
    padding-left: 0;
    position: absolute;
    white-space: normal;
    }
 
  li:hover ul {
    left: 0;
    top: 1.2em;
    }
 
  li ul li {
    border: none;
    display: list-item;
    }
 
  </style>
</head>
 
<body>
  <div class="top">
    <h1>ULISSES</h1>
 
    <ul>
      <li><a href="http://ulisses.hostei.com/index.html"
         target="_self">Início</a></li>
 
      <li><a href=
      "http://ulisses.hostei.com/espectaculo/index.html">Espectáculo</a></li>
 
      <li><a href="http://ulisses.hostei.com/sobrenos/index.html">Sobre
      nós</a></li>
 
      <li><a href=
      "http://ulisses.hostei.com/escolas/index.html">Escolas</a></li>
 
      <li><a href=
      "http://ulisses.hostei.com/fotografias-ulisses/index.html">Fotografias -
      Ulisses</a></li>
 
      <li>
        <a href="#">More</a>
 
        <ul>
          <li class="naveg_fim"><a href="#">Fotografias versão maiores de 3
          anos</a></li>
 
          <li><a href="#">Agenda</a></li>
 
          <li><a href="#">Contato</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

amrac
amrac's picture
Offline
newbie
Last seen: 6 years 29 weeks ago
Joined: 2014-02-17
Posts: 3
Points: 6

Issue solved!

Yes, I was able to solve this issue with your help. Thanks a lot, Gary!