размещение предмета

Question

Пожалуйста, посмотрите на скрипку, которую я публикую, и расскажите, как сделать значок меню (три звездочки (*)) рядом с меню приветственного пользователя. т.е. на той же линии, а не под ней.

enter link description here

вот фрагмент кода:

/*DROPDOWN FUNCTIONALITY*/ 
 
ul { 
 
\t padding:0; 
 
\t margin:0 
 
} 
 
a { 
 
\t display:block; 
 
\t text-decoration: none; 
 
} 
 
li { 
 
\t display:block; 
 
\t float:left; 
 
} 
 
li ul li { 
 
\t float:none; 
 
} 
 
li ul { 
 
\t display:none; 
 
\t position:absolute; 
 
\t z-index:1 
 
} 
 
li:hover ul { 
 
\t display:block; 
 
} 
 

 
/*DROPDOWN STYLING:*/ 
 
#menu { 
 
\t height:30px 
 
} 
 
#menu a { 
 
\t color:#024E67; 
 
\t padding:10px 15px 10px 15px; 
 
} 
 
#menu a:hover { 
 
\t color:#ffffff; 
 
} 
 
#menu li { 
 
\t background-color:#FFF; 
 
\t margin-left:-1px 
 
} 
 
#menu li:hover { 
 
\t background-color:#61b4cf 
 
} 
 
i { 
 
    margin-right: 15px; 
 
}

<nav> 
 
    \t <div id="UserSettings" name="UserSettings" class="UserSettings"> 
 
     <!-- offer welcome message to user logged in --> 
 
     <div class="welcomeText" id="welcomeText" name="welcomeText"> 
 
     <label>Welcome SuperUser</label> 
 
      <ul id="menu"> 
 
      <li> 
 
      <a href="#"><i class="fa fa-bars" title="Menu"></i>***</a> 
 
       <ul> 
 
       <li><a href="#"><i class="fa fa-cog" title="Preferences"></i>Preferences</a></li> 
 
       <li><a href="#"><i class="fa fa-user" title="Active Sessions"></i>Active Sessions</a></li> 
 
       <li><a href="#"><i class="fa fa-lock" title="Change Password"></i>Change Password</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
    </div>

`

Answer 1

Добавить display: inline-block; для ulDemo

ul { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
}