jQuery ドロップダウンメニューでドロップダウン部分のレイアウトを変えたい

###前提・実現したいこと
①jQuery ドロップダウンメニューでドロップダウン部分のレイアウトを変えたいです。
メニュー１のドロップダウンメニューがメニュー２の領域に入ってしまってもいいので、わかりやすく表示したいです。

②<li></li>でくくっていることが原因だと思いますが、ドロップダウンメニューの項目に表示される「・」を無くしたいです。

###発生している問題・エラーメッセージ
以下のイメージのように段落ドロップダウン部の段落が見にくい状態になっています。

メニュー１
teratail メニュー１−2 メニュー1-3
teratail メニュー1-2 メニュー1-3

のように表示させたいです

###該当のソースコード

HTML
1<html>
2<head>
3
4<style>
5#menu div {
6  position: relative;
7  float: left;
8}
9
10span {
11  cursor: pointer;
12}
13
14ul {
15  display: none;
16  position: absolute;
17}
18</style>
19
20<body>
21<div id="menu">
22<div>
23<span>メニュー 1</span>
24<ul>
25<li><a href="#">teratail</a>&nbsp<a href="#">メニュー 1-2</a>&nbsp<a href="#">メニュー 1-3</a></li>
26<li><a href="#">teratail</a>&nbsp<a href="#">メニュー 1-2</a>&nbsp<a href="#">メニュー 1-3</a></li>
27
28</ul>
29</div>
30<div>
31<span>メニュー 2</span>
32<ul>
33<li><a href="#">メニュー 2-1</a></li>
34<li><a href="#">メニュー 2-2</a></li>
35<li><a href="#">メニュー 2-3</a></li>
36</ul>
37</div>
38<div>
39<span>メニュー 3</span>
40<ul>
41<li><a href="#">メニュー 3-1</a></li>
42<li><a href="#">メニュー 3-2</a></li>
43<li><a href="#">メニュー 3-3</a></li>
44</ul>
45</div>
46</div>
47
48<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
49<script>
50$(function () {
51  $('span').click(function() { 
52    if ($(this).attr('class') == 'selected') {
53      // メニュー非表示
54      $(this).removeClass('selected').next('ul').slideUp('fast');
55    } else {
56      // 表示しているメニューを閉じる
57      $('span').removeClass('selected');
58      $('ul').hide();
59
60      // メニュー表示
61      $(this).addClass('selected').next('ul').slideDown('fast');
62    }    
63  });
64  
65  // マウスカーソルがメニュー上/メニュー外
66  $('span,ul').hover(function(){
67    over_flg = true;
68  }, function(){
69    over_flg = false;
70  });  
71  
72  // メニュー領域外をクリックしたらメニューを閉じる
73  $('body').click(function() {
74    if (over_flg == false) {
75      $('span').removeClass('selected');
76      $('ul').slideUp('fast');
77    }
78  });
79});
80</script>
81
82</body>
83
84</head>
85</html>
86

行動規範の内容に同意します

回答1件

ベストアンサー

メニュー１
teratail メニュー１−2 メニュー1-3
teratail メニュー1-2 メニュー1-3

のように表示させたいです

これだけを実現するならulに横幅をつける事でかいけつします。

css
1ul {
2  display: none;
3  position: absolute;
4  width: 500px;//追加
5}

ただ、これだと「メニュー2」や「メニュー３」の表示があまりキレイとはいえないので

css
1#menu{
2  position: relative;//追加
3}
4
5#menu div {
6  // position: relative;削除
7  float: left;
8
9}
10
11span {
12    cursor: pointer;
13}
14
15ul {
16    display: none;
17    position: absolute;
18    left: 0px;//追加
19    width: 100%;//追加
20}