CSS中的格式化问题

我正试图进入web开发，特别是CSS，并且我想要做一些实用的操作：简单的菜单栏。不过，我在正确格式化子菜单的锚时遇到了问题，因为它们需要两行而不是一行。CSS中的格式化问题

这里的HTML代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="test.css" /> 
    </head> 
    <body> 
     <ul id="menu"> 
      <li><a href="#">Menu 1</a> 
       <ul> 
        <li><a href="#">Submenu 1</a></li> 
        <li><a href="#">Submenu 2</a></li> 
        <li><a href="#">Submenu 3</a></li> 
        <li><a href="#">Submenu 4</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Menu 2</a></li> 
      <li><a href="#">Menu 3</a></li> 
      <li><a href="#">Menu 4</a></li> 
      <li><a href="#">Menu 5</a></li> 
     </ul> 
    </body> 
</html>

而且CSS代码：

#menu{ 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    } 
#menu li{ 
    float:left; 
    padding: 0px 8px 0px 8px; 
    position: relative; 
} 
#menu li ul{ 
    position: absolute; 
    list-style: none; 
    right: 0; 
    display: none; 
} 
#menu li li{ 
    float: none; 
} 
#menu li:hover ul{ 
    display: block; 
}

来源

2012-07-26 Cristi

欢迎来到StackOverflow。如果答案解决了您的问题，[您可以接受此答案]（http://meta.stackexchange.com/a/5235/170863）。然后，您也可以用灰色向上箭头向上投票一个或多个答案。 – 2012-07-26 23:24:21

这里有几个选项...

改变你的CSS下面给整个子菜单中的其他主菜单项下面

#menu{ 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    } 
#menu li{ 
    float:left; 
    padding: 0px 8px 0px 8px; 
} 
#menu li ul{ 
    list-style: none; 
    right: 0; 
    display: none; 
    width: 100%; 
    position: absolute; 
} 
#menu li li{ 
    float: none; 
    width: 100%; 
    display: block; 
} 
#menu li:hover ul{ 
    display: block; 
}

此选项将滑过顶部菜单项，这可能不是理想的，但嘿，这是一个选项...

#menu{ 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    } 
#menu li{ 
    float:left; 
    padding: 0px 8px 0px 8px; 
} 
#menu li ul{ 
    list-style: none; 
    right: 0; 
    display: none; 
    position: relative; 
    width: 100%; 
} 
#menu li li{ 
    float: none; 
    width: 100%; 
    display: block; 
} 
#menu li:hover ul{ 
    display: block; 
}

来源

2012-07-26 23:34:36

如果您不想要固定宽度，此选项将随着子菜单项的宽度而增大。 – 2012-07-26 23:36:44

增加的li的宽度，使文本能适应。

来源

2012-07-26 23:32:25

只需设置width的#menu li即可。

#menu li{ 
    float:left; 
    padding: 0px 8px 0px 8px; 
    position: relative; 
    width: 80px; 
}

Try a demo。

来源

2012-07-26 23:33:43

CSS中的格式化问题

回答

相关问题