Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

html - Absolute and relative positioning in menu

We all have hard times with positioning absolute divs :S In my case its horizontal sub-menus with this css:

ul.children{
display:none;
position:absolute;
}
ul.children li{
position:relative;
height:60px;
float:none;
}
li.page_item_has_children:hover > ul.children{
display:inline;
}

enter image description here

As you can see on the picture whole submenu moves to the left for 50% of the parents width... I tried everything and created just a bigger mess xD

So if anyone can help me out with this I will be very thankful :)

HTML:

<li class="page_item page-item-2 page_item_has_children">
    <a href="url">About</a>
    <ul class='children'>
        <li class="page_item page-item-39">
            <a href="url">About</a></li>
        <li class="page_item page-item-41">
            <a href="url">Contact us</a></li>
    </ul>
 </li>

I can't change html cause its wordpress theme :S

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Update

ul.children {
  display: none;
}

ul.children li {
  position: relative;
  height: 60px;
  float: none;
}

li.page_item_has_children:hover > ul.children {
  display: inline;
}

li {
  float: left;
  list-style-type: none;
  width: 5em;
}
<ul>
  <li class="page_item page-item-2 page_item_has_children">
    <a href="url">About</a>
    <ul class='children'>
      <li class="page_item page-item-39">
        <a href="url">About</a></li>
      <li class="page_item page-item-41">
        <a href="url">Contact us</a></li>
    </ul>
  </li>
  
  <li class="page_item page-item-2 page_item_has_children">
    <a href="url">More info</a>
    <ul class='children'>
      <li class="page_item page-item-39">
        <a href="url">Item 1</a></li>
      <li class="page_item page-item-41">
        <a href="url">Item 2</a></li>
      <li class="page_item page-item-41">
        <a href="url">Item 3</a></li>
    </ul>
  </li>
</ul>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...