Question

您好我想创建这个： enter image description here

我遇到了一个问题，因为菜单旁边不是菜单，而是菜单......

CSS：

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('img/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover {   background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

HTML：

                               <ul id="navigationMenu">
                                    <li>
                                        <a class="home" href="#">
                                            <span>Home</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a class="about" href="#">
                                            <span>About</span>
                                        </a>
                                    </li>

                                    <li>
                                         <a class="services" href="#">
                                            <span>Services</span>
                                         </a>
                                    </li>

                                    <li>
                                        <a class="portfolio" href="#">
                                            <span>Portfolio</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a class="contact" href="#">
                                            <span>Contact us</span>
                                        </a>
                                    </li>
                                </ul>

相同的菜单：http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html

有可能吗？

Answer 1

你发布的HTML甚至没有任何单一的div ...

顺便说一句，你应该使用float：left来水平堆叠块元素（如div）。显示：内联块;也派上用场了。

Answer 2

演示 - http://jsfiddle.net/pfzt9b9y/

执行此类操作，添加div

的ul面

＆＃13;

* {
  margin: 0;
  padding: 0;
}
ul {
  float: left;
}
.content {
  display: table-cell;
}
#navigationMenu li {
  list-style: none;
  height: 39px;
  padding: 2px;
  width: 40px;
}
#navigationMenu span {
  /* Container properties */
  width: 0;
  left: 38px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  /* Text properties */
  font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.6px;
  white-space: nowrap;
  line-height: 39px;
  /* CSS3 Transition: */
  -webkit-transition: 0.25s;
  /* Future proofing (these do not work yet): */
  -moz-transition: 0.25s;
  transition: 0.25s;
}
#navigationMenu a {
  background: url('http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/img/navigation.jpg') no-repeat;
  height: 39px;
  width: 38px;
  display: block;
  position: relative;
}
/* General hover styles */

#navigationMenu a:hover span {
  width: auto;
  padding: 0 20px;
  overflow: visible;
}
#navigationMenu a:hover {
  text-decoration: none;
  /* CSS outer glow with the box-shadow property */
  -moz-box-shadow: 0 0 5px #9ddff5;
  -webkit-box-shadow: 0 0 5px #9ddff5;
  box-shadow: 0 0 5px #9ddff5;
}
/* Green Button */

#navigationMenu .home {
  background-position: 0 0;
}
#navigationMenu .home:hover {
  background-position: 0 -39px;
}
#navigationMenu .home span {
  background-color: #7da315;
  color: #3d4f0c;
  text-shadow: 1px 1px 0 #99bf31;
}
/* Blue Button */

#navigationMenu .about {
  background-position: -38px 0;
}
#navigationMenu .about:hover {
  background-position: -38px -39px;
}
#navigationMenu .about span {
  background-color: #1e8bb4;
  color: #223a44;
  text-shadow: 1px 1px 0 #44a8d0;
}
/* Orange Button */

#navigationMenu .services {
  background-position: -76px 0;
}
#navigationMenu .services:hover {
  background-position: -76px -39px;
}
#navigationMenu .services span {
  background-color: #c86c1f;
  color: #5a3517;
  text-shadow: 1px 1px 0 #d28344;
}
/* Yellow Button */

#navigationMenu .portfolio {
  background-position: -114px 0;
}
#navigationMenu .portfolio:hover {
  background-position: -114px -39px;
}
#navigationMenu .portfolio span {
  background-color: #d0a525;
  color: #604e18;
  text-shadow: 1px 1px 0 #d8b54b;
}
/* Purple Button */

#navigationMenu .contact {
  background-position: -152px 0;
}
#navigationMenu .contact:hover {
  background-position: -152px -39px;
}
#navigationMenu .contact span {
  background-color: #af1e83;
  color: #460f35;
  text-shadow: 1px 1px 0 #d244a6;
}

＆＃13;

<ul id="navigationMenu">
  <li> <a class="home" href="#"><span>Home</span>
        </a>
  </li>
  <li>
    <a class="about" href="#">
      <span>About</span>
    </a>
  </li>
  <li>
    <a class="services" href="#">
      <span>Services</span>
    </a>
  </li>
  <li>
    <a class="portfolio" href="#">
      <span>Portfolio</span>
    </a>
  </li>
  <li>
    <a class="contact" href="#">
      <span>Contact us</span>
    </a>
  </li>
</ul>

<div class="content">

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
</div>

＆＃13;

Answer 3

这是你要找的东西吗？ http://jsfiddle.net/NoahWetjen/ccyf1k29/

#navWrapper {
    display: inline-block;
    box-sizing: border-box;
    float: left;
    width: 35%;
    height: 400px;
    background-color: red;
}

#rightDiv {
    display: inline-block;
    box-sizing: border-box;
    float: left;
    width: 65%;
    height: 400px;
    background-color: blue;
}

2个水平div（菜单+ div）

3 个答案: