Question

好的，所以我想在左侧菜单旁边放一个标识。问题是，它不起作用。我尝试了一切。有什么想法吗？

HTML：

<div id="flat-menu" class="color_1">

<ul>
    <li><a href="/shop">Shop ⌄</a>

        <ul class="dropdown-menu-full-width effect-1"> <!-- dropdown menu -->
        <div class="column-1 alpha offset-by-three">
            <a href="#"><img src="/assets/img/cube.png" alt="img 1">
            <p><b><center>P93 Printer</p></b></center></a>
        </div>
        <div class="clearfix"></div> <!-- clearfix -->

        </ul>

    </li>
    <li><a href="/materials">Materials</a></li>
    <li><a href="/solutions">Solutions</a>

       <!-- <ul class="dropdown-menu column-1 effect-2"> 

            <li><a href="/solutions/personal">Personal</a></li>
            <li><a href="/solutions/commercial">Commercial</a></li>
            <li><a href="/solutions/for-schools">For Schools</a></li>
            <li><a href="/solutions/non-profits">For Non-Profits</a></li>

        </ul> --> 
    </li> 
    <li><a href="/company">Company</a></li>
    <li><a href="/help">Support</a></li>


    </li></div>

   </ul>

CSS：

    #flat-menu.color_1 ul,#flat-menu.color_1 li,#flat-menu.color_1 a,#flat-menu.color_1 p {
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}

#flat-menu.color_1 {
background:#fff;
min-width:20%;
max-width:100%;
min-height:40px;
position:relative;
z-index:999;
width:100%;
font-size:22px;
font-family:arial;

}

#flat-menu.color_1>ul {
min-height:40px;
float:left;
width:100%;
background:#fff;
border-bottom:2px solid #d7d7d7;
}

#flat-menu.color_1>ul>li {
float:left;
line-height:18px;
border-top:2px solid rgba(0,0,0,0);
cursor:pointer;
margin-bottom:-2px;
padding-top:10px;
padding-bottom:10px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-bottom:2px solid rgba(0,0,0,0);
}

#flat-menu.color_1>ul>li:before {
content:"";
display:block;
height:20px;
width:1px;
background:rgba(0,0,0,.22);
position:relative;
float:right;
right:0;
z-index:1;
}

#flat-menu.color_1>ul>.active {
background:#19b7ff;
border-bottom:2px solid #0086c3;
margin-left:-1px;
}

#flat-menu.color_1>ul>.active:before {
width:0;
}

#flat-menu.color_1>ul>.active>a {
color:#fff;
position:relative;
z-index:10;
background:#19b7ff;
}

#flat-menu.color_1>ul>.active:hover,#flat-menu.color_1>ul>.active:hover>a {
background:#19b7ff;
}

#flat-menu.color_1>ul>li>a {
padding:11px 15px;
}

#flat-menu.color_1 ul li a {
color:#525252;
font-weight:700;
text-transform:capitalize;
}

#flat-menu.color_1>ul>li:hover {
background:rgba(17,36,59,.05);
border-top:2px solid #19b7ff;
transition:all .3s linear 0;
-ms-transition:all .3s linear 0;
-webkit-transition:all .3s linear 0;
-moz-transition:all .3s linear 0;
-o-transition:all .3s linear 0;
}

#flat-menu.color_1 .column-1 {
width:16.333333333333%;
float:left;
margin:0 1% 10px;
}

#flat-menu.color_1 .column-2 {
width:32.666666666667%;
float:left;
margin:0 1% 10px;
}

#flat-menu.color_1 .column-3 {
width:48%;
float:left;
margin:0 1% 10px;
}

#flat-menu.color_1 .column-4 {
width:63.333333333333%;
float:left;
margin:0 1% 10px;
}

#flat-menu.color_1 .column-5 {
width:79.666666666667%;
float:left;
margin:0 1% 10px;
}

#flat-menu.color_1 .column-6 {
width:98%;
float:left;
margin:0 1% 10px;
}

#flat-menu.color_1 .clearfix {
clear:both;
display:table;
margin:0;
padding:0;
}

#flat-menu.color_1>ul>li>.dropdown-menu {
max-width:50%;
}

#flat-menu.color_1 ul li .dropdown-menu {
position:absolute;
background:#fff;
top:40px;
margin-left:0;
margin-top:2px;
cursor:default;
border:1px solid rgba(0,0,0,.13);
padding:13px 20px;
}

#flat-menu.color_1 ul li .dropdown-menu-full-width {
position:absolute;
left:0;
background:#fff;
top:40px;
margin-top:2px;
margin-left:-1px;
width:100%;
cursor:default;
border:1px solid rgba(0,0,0,.13);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:13px 20px;
}

#flat-menu.color_1 ul li:hover>.effect-1,#flat-menu.color_1 ul li:hover>.effect-2 {
transition:all .2s ease-in 0;
-ms-transition:all .2s ease-in 0;
-webkit-transition:all .2s ease-in 0;
-moz-transition:all .2s ease-in 0;
-o-transition:all .2s ease-in 0;
visibility:visible;
opacity:1;
height:auto;
overflow:visible;
}

#flat-menu.color_1 ul li .effect-1,#flat-menu.color_1 ul li .effect-2 {
visibility:hidden;
opacity:0;
height:0;
overflow:hidden;
}

#flat-menu.color_1 ul li .dropdown-menu:before,#flat-menu.color_1 ul li .dropdown-menu-full-width:before {
content:"";
display:block;
height:5px;
width:100%;
background:rgba(255,0,0,0);
position:absolute;
left:0;
top:-5px;
}

#flat-menu.color_1 ul li .dropdown-menu li,#flat-menu.color_1 ul li .dropdown-menu-full-width li {
position:relative;
padding-top:8px;
padding-bottom:8px;
margin-bottom:1px;
font-size:small;
border-bottom:1px solid rgba(0,0,0,.05);
}

#flat-menu.color_1 ul li .dropdown-menu li a {
color:rgba(0,0,0,.5);
}

#flat-menu.color_1 ul li .dropdown-menu li:hover>a,#flat-menu.color_1 ul li .dropdown-menu-full-width li:hover>a {
color:#19b7ff;
transition:all .3s linear 0;
-ms-transition:all .3s linear 0;
-webkit-transition:all .3s linear 0;
-moz-transition:all .3s linear 0;
-o-transition:all .3s linear 0;
}

#flat-menu.color_1 .grid div {
background:rgba(0,0,0,.1);
text-align:center;
font-size:small;
padding:5px 0;
}

#flat-menu.color_1 ul li .dropdown-menu li .dropdown-menu {
position:absolute;
left:100%;
top:-19px;
margin-left:35px;
}

#flat-menu.color_1 ul li .dropdown-menu li .dropdown-menu:before {
content:"";
display:block;
height:100%;
width:60px;
background:rgba(255,0,0,0);
position:absolute;
left:-50px;
top:0;
}

#flat-menu.color_1 ul li .dropdown-menu li .dropdown-menu:after {
content:"";
display:block;
height:0;
width:0;
border-right:10px solid rgba(255,255,255,1);
border-top:10px solid rgba(0,0,0,0);
border-bottom:10px solid rgba(0,0,0,0);
position:absolute;
top:18px;
left:-10px;
}

#flat-menu.color_1 img {
width:92%;
float:left;
display:block;
margin:4%;
  opacity: 0.8;
  -webkit-transition: all 0.5s ease; /*Transition*/
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
#flat-menu.color_1 img:hover {
  opacity: 1;
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); /*Glow*/
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
    box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

#flat-menu.color_1 h1 {
font-size:medium;
color:rgba(0,0,0,.7);
margin:0;
padding:5px 0;
}

#flat-menu.color_1 hr {
border:1px solid rgba(0,0,0,.05);
}

#flat-menu.color_1 p {
color:rgba(0,0,0,.77);
font-size:14px;
line-height:18px;
}

#flat-menu.color_1 ul li .dropdown-menu li .fa.fa-chevron-right {
position:absolute;
right:0;
color:rgba(0,0,0,.24);
font-size:xx-small;
line-height:14px;
}

#flat-menu.color_1>ul>.social-bar {
float:right;
height:40px;
line-height:0;
width:5%;
text-align:center;
margin:0 1px;
}

#flat-menu.color_1>ul>.social-bar>a {
width:100%;
height:100%;
display:block;
color:#fff;
}

#flat-menu.color_1>ul>.social-bar:hover i {
transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
}

#flat-menu.color_1>ul>.social-bar .fa.fa-google-plus {
background:#ee4d4e;
width:100%;
height:100%;
color:#fff;
line-height:38px;
border-bottom:2px solid #e01516;
}

#flat-menu.color_1>ul>.social-bar .fa.fa-twitter {
background:#19b8ff;
width:100%;
line-height:39px;
height:100%;
color:#fff;
border-bottom:2px solid #09d;
}

#flat-menu.color_1>ul>.social-bar .fa.fa-facebook {
background:#4e6bab;
width:100%;
line-height:40px;
height:100%;
color:#fff;
border-bottom:2px solid #394f7f;
}

#flat-menu.color_1 .button-1,#flat-menu.color_1 .button-2,#flat-menu.color_1 .button-3,#flat-menu.color_1 .button-4,#flat-menu.color_1 .button-5 {
min-width:100px;
height:40px;
font-size:16px;
font-weight:700;
text-transform:capitalize;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
border-top:none;
border-left:none;
border-right:none;
color:#fff;
cursor:pointer;
text-align:center;
}

#flat-menu.color_1 .button-1 {
background-color:#57bf77;
border-bottom:2px solid #2d914d;
}

#flat-menu.color_1 .button-2 {
background-color:#19b7ff;
border-bottom:2px solid #1399d6;
}

#flat-menu.color_1 .button-3 {
background-color:#896dcf;
border-bottom:2px solid #613dba;
}

#flat-menu.color_1 .button-4 {
background-color:#fb6f51;
border-bottom:2px solid #e52d06;
}

#flat-menu.color_1 .button-5 {
background-color:#00c9cf;
border-bottom:2px solid #35b1b5;
}

#flat-menu.color_1 input {
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
background-color:#f1f3f5;
border:1px solid #dbe0e5;
padding:5px;
}

#flat-menu.color_1 input:focus {
background-color:rgba(17,35,59,.1);
}

#flat-menu.color_1 .alpha {
margin-left:0!important;
}

#flat-menu.color_1 .omega {
margin-right:0!important;
}

#flat-menu.color_1 .offset-by-one {
padding-left:1%;
}

#flat-menu.color_1 .offset-by-two {
padding-left:2%;
}

#flat-menu.color_1 .offset-by-three {
padding-left:3%;
}

#flat-menu.color_1 .offset-by-four {
padding-left:4%;
}

#flat-menu.color_1 .offset-by-five {
padding-left:5%;
}

#flat-menu.color_1 .mobile-button {
display:none;
}

#flat-menu.color_1 ul li .dropdown-menu li:last-child,#flat-menu.color_1 .button-1:active,#flat-menu.color_1 .button-2:active,#flat-menu.color_1 .button-3:active,#flat-menu.color_1 .button-4:active,#flat-menu.color_1 .button-5:active {
border-bottom:none;
}

@media screen and min-width768px{
#flat-menu.color_1 ul li .effect-2 {
margin-top:40px;
}

#flat-menu.color_1 ul li:hover>.effect-2 {
margin-top:2px;
}
}

@media screen and max-width768px{
#flat-menu.color_1 .column-1,#flat-menu.color_1 .column-2,#flat-menu.color_1 .column-3,#flat-menu.color_1 .column-4,#flat-menu.color_1 .column-5,#flat-menu.color_1 .column-6 {
width:100%;
margin:0 0 10px;
}

#flat-menu.color_1>ul>li {
float:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:relative;
border-bottom:1px solid rgba(0,0,0,.05);
}

#flat-menu.color_1>ul>li:first-child {
background:#19b7ff;
position:relative;
left:1px;
}

#flat-menu.color_1>ul>li:first-child>a,#flat-menu.color_1>ul>.active>a {
color:#fff;
padding-bottom:9px;
}

#flat-menu.color_1>ul>li:before {
display:none;
}

#flat-menu.color_1>ul>li>.dropdown-menu {
max-width:100%;
}

#flat-menu.color_1 ul li .dropdown-menu {
z-index:999;
margin-top:-2px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:13px 20px;
}

#flat-menu.color_1 ul li .dropdown-menu li .dropdown-menu {
position:relative;
left:0;
width:100%;
top:0;
visibility:visible!important;
opacity:1!important;
border:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:9px 0;
padding:0;
}

#flat-menu.color_1 .dropdown-menu .dropdown-menu a {
padding-left:10px;
}

#flat-menu.color_1 .dropdown-menu .dropdown-menu .dropdown-menu a {
padding-left:20px;
}

#flat-menu.color_1 .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a {
padding-left:30px;
}

#flat-menu.color_1 .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a {
padding-left:40px;
}

#flat-menu.color_1 .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a {
padding-left:50px;
}

#flat-menu.color_1 ul li .dropdown-menu li:last-child {
border-bottom:1px solid rgba(0,0,0,.05);
}

#flat-menu.color_1 ul li .dropdown-menu li .fa.fa-chevron-right {
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
}

#flat-menu.color_1 ul li .effect-1 {
visibility:hidden;
opacity:0;
height:0;
overflow:hidden;
}

#flat-menu.color_1 ul li:hover>.effect-1 {
visibility:visible;
opacity:1;
height:auto;
overflow:visible;
transition:all .2s ease-in .2s;
-ms-transition:all .2s ease-in .2s;
-webkit-transition:all .2s ease-in .2s;
-moz-transition:all .2s ease-in .2s;
-o-transition:all .2s ease-in .2s;
}

#flat-menu.color_1 .offset-by-one,#flat-menu.color_1 .offset-by-two,#flat-menu.color_1 .offset-by-three,#flat-menu.color_1 .offset-by-four,#flat-menu.color_1 .offset-by-five {
padding-left:0;
}

#flat-menu.color_1 ul li .dropdown-menu-full-width {
margin-top:-2px;
margin-left:0;
}

#flat-menu.color_1>ul>.social-bar {
float:left;
width:45px;
}

#flat-menu.color_1>ul>.social-bar i {
height:95%!important;
margin-top:2px;
}

#flat-menu.color_1 .mobile-button {
width:50%;
position:absolute;
height:40px;
z-index:999;
top:-2px;
right:0;
cursor:pointer;
display:block;
opacity:0;
}

#flat-menu.color_1 ul {
height:42px;
overflow:hidden;
}

#flat-menu.color_1 .mobile-button:checked+ul {
height:auto;
overflow:visible;
}

#flat-menu.color_1>ul>li:first-child:after {
content:"|||||";
display:block;
height:39px;
width:60px;
position:absolute;
font:bold 25px/32px arial;
top:0;
right:0;
color:#fff;
text-align:center;
letter-spacing:-2px;
text-indent:16px;
padding:0;
}

我被困住了。再次，我试图在菜单的左侧获得徽标。与Stratasys.com相似。谢谢！

Answer 1

你的意思是这样的：

<div id="flat-menu" class="color_1">

<ul>
    <li><a href="#"><img src="/assets/img/cube.png" alt="img 1" /></a></li>
    <li><a href="/shop">Shop ⌄</a>    
        <ul class="dropdown-menu-full-width effect-1"> <!-- dropdown menu -->
        <div class="column-1 alpha offset-by-three">
            <p><b><center>P93 Printer</center></b></p>
        </div>
        <div class="clearfix"></div> <!-- clearfix -->    
        </ul>    
    </li>
    <li><a href="/materials">Materials</a></li>
    <li><a href="/solutions">Solutions</a></li> 
    <li><a href="/company">Company</a></li>
    <li><a href="/help">Support</a></li>
   </ul>

</div>

对于边距，请在CSS中找到：

#flat-menu.color_1 img {
width:92%;
float:left;
display:block;
}

Answer 2

你想要这个吗？徽标位于ul的左侧

html的

<div class="nav">
    <a href="#"><img src="https://g.twimg.com/Twitter_logo_blue.png" /></a>
    <ul>
        <li><a href="http://www.google.com" >Google</a></li>
        <li><a href="http://www.bing.com" >Bing</a></li>
        <li><a href="http://www.yahoo.com" >Yahoo</a></li>
    </ul>
</div>

的CSS

.nav {
    width: 100%;
    height: 40px;
    border: lightgrey 1px solid;
}

img {
    width: 40px;
    height: 40px;
}

ul {
    margin-right: 50%;
    list-style-type: none;
    float: right;
}

li {
    float: left;
    margin: 4px 8px;
}

检查此效果。

http://jsfiddle.net/ronansmith/56fu6m44/

如何在标题中放置徽标

2 个答案: