Question

我使用Microsoft sharepoint为我的组织创建一个网站。当我尝试在<li>和<ul>中进行CSS编码时，它搞砸了我的页面，因为微软也使用了<li>和<ul>，我的css编码也影响了这些。所以我必须为我的<li>和<ul>分配一个班级。我开始调用我的<ul class="a">，然后使用这个CSS编码：

ul.a {list-style: none;padding: 0px;margin: 0px;}
ul.a li {display: block;position: relative;float: left;border:0px solid #000}
li ul {display: none;border:0px}
ul.a li a {display: block;background: #fff;padding: 0px 0px 0px 0px;text-decoration: none;
       white-space: nowrap;color: #000;border:0px; font-family: "Courier New", Times, serif;font-size: 13px;} 
ul.a li a:hover {background: #fff;}
li:hover ul.a {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #ffffff;border:0px solid #000;}
li:hover li a:hover {background: #0066ff;;border:1px solid #000;color: #fff;text-decoration: none;}
#drop-nav li ul li {border-top: 0px;}

但是当我尝试从

编辑这一行时

 li ul {display: none;border:0px}

到这个

 li ul.a {display: none;border:0px}

它不会工作。为什么？所有其他<ul> - s的消息从页面中消失。

EDIT2：我写了<il>，但确实是<li>

<style>

.menu ul {list-style: none;padding: 0px;margin: 0px;}
.menu ul li {display: block;position: relative;float:left;border:0px solid #000}
.menu li ul {display: none;border:0px}
.menu ul li a {display: block;background: #fff;padding: 0px 0px 0px 0px;text-decoration: none;
       white-space: nowrap;color: #000;border:0px; font-family: "Courier New", Times, serif;font-size: 13px;} 
.menu ul li a:hover {background: #fff;}
.menu li:hover ul {display: block; position: absolute;}
.menu li:hover li {float: none;}
.menu li:hover a {background: #ffffff;border:0px solid #000;}
.menu li:hover li a:hover {background: #0066ff;;border:1px solid #000;color: #fff;text-decoration: none;}
  #drop-nav li ul li {border-top: 0px;}

</style>


<ul id="drop-nav" class="menu">
<li class="menu">
    <a title="Hjem" href="home.aspx"><img alt="HOme" src="Home.png" style="margin: 5px;" / width="53px" class="menypic"></a>
</li>

现在好像有些事情没有用。菜单正常工作，但我在图片旁边看到了这个黑点。它应该显示无？

Answer 1

您可以定义一个类并将其放在ul对象上。

.list {}
.list li {}

喜欢这个http://jsfiddle.net/ecro5d4f/

抱歉格式化。移动。

编辑：

 li ul {display: none;border:0px}

这可能是问题所在。对于其他一切，你有一个类名，但这是通用的。

Answer 2

将行更改为：

ul.menu li {display: block;position: relative;float:left;border:0px solid #000;list-style-type: none;}

Answer 3

我是根据Lidaranis代码尝试过的，它有效：https://jsfiddle.net/ecro5d4f/1/

这就是你要找的吗？

＆＃34;菜单＆＃34; class也是<ul>，所以你也必须在它上放list-style: none;。

   .menu { list-style: none;}

使用<li>和<ul>中的类

3 个答案: