在 <li> 和 <ul> 中使用 class

Question

我使用 Microsoft Sharepoint 为我的组织制作网站。当我尝试在 <li> 和 <ul> 中进行 CSS 编码时，它弄乱了我的页面，因为微软也使用 <li> 和 <ul> 以及我的 css-coding 也会影响那些。所以我必须为我的 <li> 和 <ul> 分配一个 class。我开始调用我的 <ul class="a"> 然后使用这个 CSS-coding:

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 从页面上消失。

编辑2：我写了 <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>

现在好像有些东西不工作了。菜单可以使用，但我在图片旁边看到了这个黑点。它应该显示 none?

Answer 1

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

.list {}
.list li {}

像这样http://jsfiddle.net/ecro5d4f/

抱歉格式化。手机。

编辑：

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

这可能是问题所在。对于其他所有内容，您都有一个 class 名称，但这是通用名称。

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/

这就是你要找的吗？

"menu" class 也是一个 <ul>，所以你也必须在上面放一个 list-style: none;。

   .menu { list-style: none;}

在 <li> 和 <ul> 中使用 class

using class in <li> and <ul>

html

css

html-lists