在DIV内造型菜单

我如何访问CSS中的DIV内的UL和LI菜单？

<section id="main">
            <div id="=cont">
                <ul>
                    <li><a href="about.html"> Our Hitory </a>
                        <ul>
                            <li><a href="index.html"> The Foundation </a></li>
                            <li><a href="about.html"> Our Founders </a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="about.html"> Our Company </a>
                        <ul>
                            <li><a href="index.html"> Our Business Practices </a></li>
                            <li><a href="about.html"> Our Brokers </a></li>
                        </ul>
                    </li>
               </ul>
           </div>

我在CSS中尝试了很多组合，但似乎无法访问该菜单并进行样式。

非常感谢！

您在 <div id="=cont">中遇到错误，将其更改为 <div id="cont">

#cont > ul{
  list-style-type: none;
}
#cont > ul li{
 padding: 10px;
 background: green;
}
#cont >ul li ul{
  list-style-type: none;
}
#cont >ul li ul li{
  padding: 10px;
  background: black;
}

    
    
    <section id="main">
                <div id="cont">
                    <ul>
                        <li><a href="about.html"> Our Hitory </a>
                            <ul>
                                <li><a href="index.html"> The Foundation </a></li>
                                <li><a href="about.html"> Our Founders </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="about.html"> Our Company </a>
                            <ul>
                                <li><a href="index.html"> Our Business Practices </a></li>
                                <li><a href="about.html"> Our Brokers </a></li>
                            </ul>
                        </li>
    
                   </ul>
               </div>
    </section>

这是样式化的示例从：http：//www.java2s.com/code/htmlcss/tags/settingstystyleforinedeadeadeadeadiv.htm

#footer ul {
  width: 1000px;
  text-align: center;
}
#footer li {
  display: inline;
  list-style-type: none;
  line-height: 44px;
}
#footer li a {
  color: #574621;
  text-decoration: none;
  margin: 0 10px;
}
#footer li a:visited {
  text-decoration: none
}
#footer li a:hover {
  text-decoration: underline
}

?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
  <div id="footer">
    <ul>
      <li><a href="#">Home</a>|</li>
      <li><a href="#">About our Hotel</a>|</li>
      <li><a href="#">Services</a>|</li>
      <li><a href="#">Photogallery</a>|</li>
      <li><a href="#">Testimonials</a>|</li>
      <li><a href="#">Locations</a>|</li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </div>  
  
</body>
</html>

与您可以在CSS表中使用的标签说话，例如

示例1：

  .id ul li {
     your Css Code
  }
  /* in your case  */
  .cont {
    position: ...;
  }
  /* Or for deeper Tags  
  * for example:
  */
 .cont ul li a {
     position: ...;
 }

或那是一个不好的编程风格

示例2：

 <li style="color:green"><a href="about.html"> Our Hitory </a>

还有第三个选项可以将CSS代码如示例1中的示例标记中的示例标记

中的示例1放置。

示例3：

 <head> 
 <style>
 <!-- Code from Example 1 -->
 </style>
 </head>

希望我能帮助您！

如果您有任何疑问，请问。

祝你好运

相关内容

最新更新

热门标签：